<template>
	<view class="list">
		<view class="list__content">
			<view class="titBox" v-for="(data,indexs) in list" :key="indexs">
				<view class="titBox_in">
					<view class="showTitle" @click="loadData(data.id,indexs)">{{data.text}}
						<span :class="['spans',data.showContent == 1? 'down':'']">&#xe65e;</span>
					</view>
					<view :class="['contentBox',data.showContent == 1? 'open':'']">

						<view @click="toLink(item.id)" class="list__contentin" v-for="(item, index) in studylist" :key="index">
							<view class="list__contentin-text">
								<view class="text__title">{{ item.title }}</view>
							</view>
							<view class="list__contentin-timeBox">
								<view class="list__contentin-timeBox-time">{{ item.publishTime }}</view>
								<view class="list__contentin-timeBox-read">{{item.readVolume}} 已阅</view>
							</view>
						</view>
					</view>

				</view>


			</view>
		</view>
	</view>

</template>

<script>
	import baseService from '@/services/study/index.js';
	const service = new baseService();
	export default {
		name: "levelTextContent",
		props: {
			list: {
				type: Array,
				default: function() {
					return [];
				}
			},
			type: {
				type: String
			},
			levelId: {
				type: String
			},
			liIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				studylist: []
			}
		},


		methods: {
			loadData(id, index) {
				service.studyVideoList(id, this.type, 1, 100, null).then(res => {
					this.studylist = res.result.list;

					// this.listData[index].showContent = (this.listData[index].showContent == 1) ? 0 : 1
					this.$emit('toggleShow', index)


				})

			},
			toLink(id) {
				uni.navigateTo({
					url: '/pages/tabbar/study/details/index?id=' + id + '&type=1'
				})
			}
		}
	}
</script>

<style lang="less">
	@keyframes geiwogun {
		from {
			transform: translate(0, 0);
		}

		to {
			transform: translate(-50%, 0);
		}
	}

	// 列表

	.contentBox {
		height: 0px;
		overflow: hidden;
	}

	.open {
		height: max-content;
	}

	.list {
		.titBox {
			padding: 0 29upx;

			.titBox_in {
				border-bottom: 1upx solid #eee;

				.showTitle {
					padding: 30upx 0upx;
					font-size: 26rpx;

					.spans {
						transform: rotate(-90deg);
						display: inline-block;
						font-size: 11px;
						color: #555;
						margin-left: 20upx;
						font-family: texticons;
					}

					.down {
						transform: rotate(90deg);
						transition: .3s; //过渡时间
					}
				}
			}
		}

		&__content {
			/*margin: 20upx 30upx 0;*/
			padding: 25upx 0 0 0;
			background-color: #FFFFFF;

			.list__contentin {
				padding: 20upx 0 40upx;
				margin: 0 20upx;
				border-bottom: 1upx dashed #dddddd;



				&-text {
					display: flex;
					align-items: center;


					.text__title {
						flex: 1;
						font-size: 28upx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;

					}

					.text-sign {
						position: relative;
						overflow: hidden;
						padding: 0 10upx;
						width: 150upx;
						height: 32upx;
						background-color: #4a96f2;
						border-radius: 16upx;
						margin-right: 20upx;
						font-size: 20upx;
						line-height: 32upx;
						text-align: center;
						color: #fff;
					}

					.text-span {
						position: absolute;
						animation: geiwogun 12s linear infinite;
						white-space: nowrap;

					}
				}

				&-timeBox {
					display: flex;

					&-time {
						font-size: 20upx;
						margin-top: 20upx;
						color: #999999;
						flex: 1;
					}

					&-read {
						font-size: 20upx;
						margin-top: 20upx;
						color: #999999;
						text-align: right;
						flex: 0.5;
					}
				}
			}

			.list__contentin:last-child {
				border-bottom: 0;
			}

			.list__contentin:first-child {
				padding-top: 0;
			}
		}
	}
</style>
